<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>商品购买</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" />
  <script th:src="@{/js/jquery-3.6.0.min.js}"></script>

  <script>
$(document).ready(function () {
    $('.select-btn').on('click', function () {
        var goodsname = $(this).data('goodsname');
        var tcode = $(this).data('tcode');
        var price = $(this).data('price').replace(/[^0-9.]/g, ''); // 去除货币符号
        var gid = $(this).data('gid');

        $('#ogoodsname').val(goodsname);
        $('#otcode').val(tcode);
        $('#oprice').val(price);
        $('#ogid').val(gid);
        $('#oquantity').val(1);
        // $('#omoney').val(price);
        updateMoney(); // 初始化金额

           // 监听单价和数量变化，更新金额
    $('#oprice, #oquantity').on('input', function () {
        updateMoney();
    });

    function updateMoney() {
        var price = parseFloat($('#oprice').val()) || 0;
        var quantity = parseInt($('#oquantity').val()) || 0;
        var money = price * quantity;
        $('#omoney').text(money.toFixed(2)); // 显示两位小数
    }
    });
});
</script>
  <script>
    function buy() {
      var gid = $('#ogid').val();
      var goodsname = $('#ogoodsname').val();
      // var money = $('#omoney').val();
      var money = $('#omoney').text(); 

      var data = {
        gid: gid,
        goodsname: goodsname,
        money: money,
        price: $('#oprice').val(),
        rphone: $('#orphone').val(),
        quantity: $('#oquantity').val(),
        mailingaddress: $('#omailingaddress').val(),
        receiver: $('#oreceiver').val()
      };

      $.getJSON("/shopping/user/buy/update", data, function (response) {
        var lineno = $("#tb2 tbody tr").length + 1;
        $("#tb2 tbody").append(
          "<tr>" +
          "<td>" + lineno + "</td>" +
          "<td>" + response.goodsname + "</td>" +
          "<td>" + response.price + "</td>" +
          "<td>" + response.quantity + "</td>" +
          "<td>" + response.money + "</td>" +
          "</tr>"
        );
      });
    }
  </script>
</head>

<body>

  <div class="panel panel-primary">
    <div class="panel-heading">
      <div th:replace="~{header}"></div>
    </div>
  </div>

  <br><br><br>
  <div class="container">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">商品查询</h3>
      </div>
      <div class="panel-body">
        <form th:action="@{/user/buy/query}" method="post" class="form-horizontal">
          <span>&nbsp;商品名&nbsp;</span>
          <span><input type="text" name="goodsname" th:value="${para?.goodsname}" /></span>
          <span>&nbsp;商品编号&nbsp;</span>
          <span><input type="text" size="10" name="gid" th:value="${para?.gid}" /></span>
          <span>&nbsp;商品分类&nbsp;</span>
          <select name="goodstype">
            <option value="" th:selected="${para?.tcode == null}" >-- 请选择 --</option>
            <option th:each="t : ${allGoodsType}" th:value="${t.tcode}" th:selected="${t.tcode == para?.tcode}"
              th:text="${t.tname}">
            </option>
          </select>
          <span>&nbsp;页号&nbsp;</span>
          <select id="pageno" name="pageno">
            <option th:each="t : ${#numbers.sequence(1, totalPages)}" th:value="${t}" th:text="'第' + ${t} + '页'"
              th:selected="${pageNo == t}"></option>
          </select>
          <span>&nbsp;</span>
          <button type="submit" class="btn btn-success">查询</button>
        </form>
      </div>
    </div>

    <div>
      <ul class="pagination">
        <li><a th:text="'第' + ${currentPage} + '页 共' + ${totalPages} + '页'"></a></li>
        <li><span style="width: 6px"></span></li>
        <li><a th:text="'共' + ${totalCount} + '条记录'"></a></li>
      </ul>
    </div>

    <div class="table table-responsive">
      <table id="tb" class="table table-bordered table-hover">
        <thead class="text-center">
          <tr style="background:#eda000;color: #fff;">
            <th>序号</th>
            <th>商品名</th>
            <th>商品分类</th>
            <th>价格</th>
            <th>选择</th>
          </tr>
        </thead>
        <tbody class="text-center">
          <tr th:each="good, iterStat : ${goods}">
            <td th:text="${( (pageNo ?: 1) - 1 ) * (pageSize ?: 10) + iterStat.index + 1}">序号</td>
            <td th:text="${good.goodsname}">商品名</td>
            <td th:text="${map[good.tcode]}">商品分类</td>
            <td th:text="${#numbers.formatCurrency(good.price)}">价格</td>
            <td>
              <button type="button" class="btn btn-default select-btn" th:data-goodsname="${good.goodsname}"
                th:data-tcode="${good.tcode}" th:data-price="${#numbers.formatCurrency(good.price)}"
                th:data-gid="${good.gid}">
                选择
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="panel panel-primary">
      <br>
      <input type="hidden" id="ogid" name="ogid" />
      <span>&nbsp;商&nbsp;品&nbsp;名&nbsp;&nbsp;</span>
      <span><input type="text" size="30" id="ogoodsname" /></span>
      <span>&nbsp;商品分类&nbsp;&nbsp;</span>
      <span><input type="text" size="8" id="otcode" /></span>
      <span>&nbsp;数量&nbsp;</span>
      <span><input type="text" size="8" id="oquantity" /></span>
      <span>&nbsp;单价&nbsp;</span>
      <span><input type="text" size="8" id="oprice" /></span>
      <span>&nbsp;金额&nbsp;&nbsp;</span>
      <!-- <span><input type="text" size="8" id="omoney" /></span> -->
      <span id="omoney">0.00</span>

      <br>
      <span>&nbsp;收件人&nbsp;</span>
      <span><input type="text" size="15" id="oreceiver" /></span>
      <span>&nbsp;&nbsp;电&nbsp;话&nbsp;</span>
      <span><input type="text" size="24" id="orphone" /></span>
      <span>&nbsp;&nbsp;</span>
      <span>&nbsp;收件地址&nbsp;</span>
      <span><input type="text" size="72" id="omailingaddress" /></span>
      <span>&nbsp;&nbsp;</span>
      <button type="button" class="btn btn-success" onclick="buy()">购买</button>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">本次购买清单</h3>
      </div>
    </div>

    <div class="table table-responsive">
      <table id="tb2" class="table table-bordered table-hover">
        <thead class="text-center">
          <tr style="background:#eda000;color: #fff;">
            <th>序号</th>
            <th>商品名</th>
            <th>单价</th>
            <th>数量</th>
            <th>价格</th>
          </tr>
        </thead>
        <tbody class="text-center">
          <!-- 动态添加 -->
        </tbody>
      </table>
    </div>
  </div>

</body>

</html>